<template>
  <div class="cmt-container">
    <h4>发表评论</h4>
    <hr>
    <textarea v-model="message" cols="25" rows="5" placeholder="请输入要评论的内容，做多120字" maxlength="120"></textarea>
    <mt-button type="primary" size="large" @click="addCmt">发表评论</mt-button>
    <div class="cmt-list">
      <div class="cmt-item" v-for="item in cmtList" :key="item.id">
        <div class="cmt-title">
          <img src="http://pic1.zhimg.com/8949bb2f30ed5789857accd489644234_im.jpg" alt="">
          <span>{{ item.author }}</span>
          <span>{{ item.time | dateFormat}}</span>
        </div>
        <div class="cmt-body">{{ item.content }}</div>
      </div>
    </div>
    <mt-button type="danger" size="large" plain @click="showMore">加载更多</mt-button>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  data() {
    return {
      message: '',
      // avatar: '',
      author: '小雨',
      // content: '',
      time: new Date().toLocaleString(),
      cmtList: []
    }
  },
  created() {
    this.getCmt()
  },
  methods: {
    getCmt() {
      this.$http.get('../../data_file/cmt.json')
        .then(result => {
          this.cmtList = result.body.comments
          console.log(result.body.comments)
        })
    },
    showMore() {
      Toast({
        message: 'emmmm..没有更多啦···',
        className: 'op'
      })
    },
    addCmt() {
      // 校验内容
      if (this.message.trim().length === 0) {
        return Toast('评论内容不能为空')
      }
      // 发送 post 请求 需要定义 发送数据的格式，所以在main.js 中全局配置emulate.JSON
      // Vue.http.options.emulateJSON = true //application/x-www-form-urlencode
      // this.$http.post('/url:$route.params.id', { content: this.message.trim() })
      //   .then(function (result) {
      //     if (result.status.body === 0) {
      //       // 定义 评论队形
      //       var cmt = {}
      //     }
      //   })
      // 定义一个本地对象
      var cmt = {
        author: this.author,
        time: this.time,
        content: this.message
      }
      this.cmtList.unshift(cmt)
      this.message = ''
    }
  }
}
</script>

<style lang="scss">
.op {
  opacity: 0.7;
}
.cmt-container {
  textarea {
    font-size: 14px;
    margin: 0;
  }
  .cmt-list {
    margin: 8px 0;
    .cmt-item {
      font-size: 13px;
      .cmt-title {
        // display: flex;
        // justify-content: space-between;
        background-color: #ccc;
        line-height: 1;
        font-size: 13px;
        p {
          margin-bottom: 0;
        }
        img {
          width: 50px;
          height: 50px;
        }
      }
      .cmt-body {
        text-indent: 2em;
      }
    }
  }
}
</style>

